<template>
    <div class="App">
      <!-- 路由视图组件(只有在main.js里面注册好，路由组件的时候才可以使用) -->
      <div class="view">
        <router-view />
      </div>
      <div class="tab">
        <!-- router-link
           路由索引 
           to="路由地址(字符串)"
           to="option"
            option : {
              路由的参数
              path: '路由地址'
              name: '路由名称'
              路由地址和路由名称 只能写一个
            }
          -->
        <div :class="$route.path == item.path ? 'itemActive': 'item'" v-for="(item,index) in tab_list" :key="index">
          <!-- 当前路由信息对象的地址和要跳转的地址一致的时候，显示高亮的图片 -->
          <img :src="$route.path == item.path ? item.imgUrlActive: item.imgUrl" alt="">
          <router-link :to="item.path">
            {{ item.text }}
          </router-link>
        </div>
      </div>
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          tab_list: [
            {
              text: '首页',
              imgUrl: require('../../assets/tab/home.png'),
              imgUrlActive:require('../../assets/tab/home-active.png'),
              path: '/'
            },
            {
              text: '社区',
              imgUrl: require('../../assets/tab/community.png'),
              imgUrlActive:require('../../assets/tab/community-active.png'),
              path: '/community'
            },
            {
              text: '购物车',
              imgUrl: require('../../assets/tab/cart.png'),
              imgUrlActive:require('../../assets/tab/cart-active.png'),
              path: '/cart'
            },
            {
              text: '我的',
              imgUrl: require('../../assets/tab/myself.png'),
              imgUrlActive:require('../../assets/tab/myself-active.png'),
              path: '/user'
            }
        ]
        }
      },
    }
  </script>
  <style lang="scss">
    *{
      margin:0;
      padding: 0;
    }
    .view{
      width: 100vw;
      height: 92vh;
      overflow-y: auto;
    }
    .tab{
      width: 100vw;
      height: 8vh;
      display: flex;
      justify-content: space-between;
      box-shadow: 0 -3px 4px #eee;
      .item,
      .itemActive{
        width: 25%;
        height: 8vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img{
          height: 5vh;
        }
        a{
          color: #333;
          text-decoration: none;
        }
      }
      .itemActive{
        a{
          color: rgb(252,145,83);
        }
      }
    }
  </style>